import React from 'react'
import AnimateStart from './animateStart'
import { LoadParams } from './interface'
import { resume } from './load/resume'
import {style1, style2} from './load/style'
import styles from './index.less'
interface Istate {
  loadFile: Array<LoadParams>
}

interface Iprops {}
export default class index extends React.Component<Iprops ,Istate> {
  constructor(props: Iprops) {
    super(props)
    this.state = {
      loadFile: [
        {
        load: style1,
        type: 'css',
        id: 'style-container',
        rewrite: true
      },
      {
        load: resume,
        type: 'md',
        id: 'resume-container',
        rewrite: true
      },
      {
        load: style2,
        type: 'css',
        id: 'style-container',
        rewrite: false
      }
    ]
    }
  }
  componentDidMount() {
    const container = document.querySelector('#animateContainer')!;
    
    const ar = new AnimateStart(container, {
      content: this.state.loadFile,
      mobileAnimate: {
        styleID: 'style-container',
        resumeID: 'resume-container'
      }
    })
    const skipBtn: HTMLElement = document.querySelector('#skip-btn') as HTMLElement
    skipBtn.addEventListener('click', function() {
      ar.skip()
      skipBtn.style.display = 'none'
    })
    ar.animate()
  }
  render() {
    return (
      <div>
        <div className={styles.animateContainer} id='animateContainer'></div>
        <a href="javascript:;" id="skip-btn">Skip Animate</a>
      </div>
    )
  }
}

